<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>用车申请表</title>
    <link rel="stylesheet" href="UC_style.css">
    <style>
        .main {
            width: 100%;
            height: 800px;
            background: RGB(239,239,239);
            float: left;
        }

        #header2 {
            height: 40px;
            background: white;
        }

        table,
        th,
        td {
            background-color: white;
            border: 1px solid black;
            border-collapse: collapse;
        }

        td {
            width: 200px;
            height: 25px;
            padding: 5px;
        }

        th {
            font-size: 16px;
        }

        .had {
            text-align: center;
            height: 600px;
            width: 80%;
            margin: 0px auto;
        }

        .input1 {
            border: none;
            height: 90%;
            width: 100%;
            font-size:16px;
            outline:none;
        }
        .input2 {
            color: black;
            background-color: RGB(239,239,239);
            font-size: 20px;
            height: 40px;
            width: 100px;
            margin-left:450px;
            margin-right: 30px;
            
        }
        .input2:hover{
            background-color:#808080;
        }
        .text{
        	border: none;
            height: 50px;
            width: 100%;
            font-size:16px;
          	
        }

        select {
            border: 0px;
            height: 90%;
            width: 90%;
            outline:none;
        }

        textarea {
            border: 0px;           
            width: 100%;
            resize: none;
            font-size: 16px;
        }

        .button1 {
            height: 40px;
            width: 120px;
            font-size: 15px;
            margin-left: 1000px;
            position:center;
            color: #000000;
            background-color: #808080;
        }

        h2 {
            text-align: center;
        }
        .button_file{
			background-color: white;
    		color:RGB(64,158,255);    		
    		height:22px;
   	 		text-align: center;
    		font-size: 16px;
    		border:none;
    		font-weight:bold;
		}
		.button_file:hover {
    		background-color:RGB(249,249,249);
		}
		.button_file:active {
 			 transform: translateY(2px);
		}
    </style>
</head>

<body>
    <div class="main">
        <div id="header2">
            <img src="img/frist.png" alt="Big Boat" width="30" height="30" style=" vertical-align: middle;">
            乘客用车管理 > 申请用车
        </div>
        <h2>用车申请表</h2>
        <form>
        <table class="had">
            
                <tr>
                    <th>乘车人数：</th>
                    <td><input class="input1" type="number" id="passengers" name="passengers" min="1" max="6" required></td>
                    <th>用车范围：</th>
                    <td>
                        <select id="" name="">
                            <option value="" selected disabled hidden>请选择范围</option>
                            <option value="bens">本市内</option>
                            <option value="bensn">本省内</option>
                            <option value="bensw">本省外</option>
                        </select>
                    </td>
                    <th>联系电话：</th>
                    <td><input class="input1" type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"required></td>
                </tr>
                <tr>
                    <th>用车时间：</th>
                    <td><input class="input1" type="datetime-local" id="date" name="date" required></td>
                    <th>返回时间：</th>
                    <td><input class="input1" type="datetime-local" id="date" name="date" required></td>
                    <th>紧急程度：</th>
                    <td>
                        <select id="" name="">
                            <option value="" selected disabled hidden></option>
                            <option value="yban">一般</option>
                            <option value="jji">紧急</option>
                            <option value="fcjji">非常紧急</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>申请人：</th>
                    <td><input class="input1" type="text" id="name" name="name" required></td>
                    <th>申请时间：</th>
                    <td><input class="input1" type="text" readonly="readonly" id="nowtime" /></td>
                    <th>申请部门：</th>
                    <td>
                        <select id="department" name="department" required>
                            <option value="" selected disabled hidden>请选择部门</option>
                            <option value="sales">销售部</option>
                            <option value="marketing">市场部</option>
                            <option value="finance">财务部</option>
                            <option value="hr">人力资源部</option>
                        </select>
                    </td>
                </tr>
            
            
                <tr>
                    <th>起始地点</th>
                    <td colspan="2"><input class="input1" type="text" required/></td>
                    <th>前往地点</th>
                    <td colspan="2"><input class="input1" type="text" required/></td>
                </tr>
                <tr>
                    <th style="height:100px">用车事由</th>
                    <td colspan="5"><textarea id="reason" name="reason" rows="8" cols="30" style="outline:none;" required></textarea></td>
                </tr>
            
            
                <tr >
                    <th >备注</th>
                    <td colspan="5" ><textarea rows="3" cols="30" style="outline:none;"required></textarea></td>
                </tr>
           		<tr>
                    <th style="height:50px">附件</th>
                    <td colspan="5" style="text-align:left">	
                    	<input type="button" class="button_file" value="添加附件" onclick="path.click()" >					
						<input type="text" class="text" name="lookfile" id="lookfile" style="outline:none;" readonly>											
						<input type="file"  id="path" style="display:none" onchange="lookfile.value+='   '+this.value">								
					</td>
                </tr> 
        </table>
        <br />
        <input type="submit" onclick="test()" class="input2" value="提交">
        <input type="reset" class="input2" value="清空">
        </form>
    </div>
    <script type="text/javascript">
        function gettime() {
            var time = new Date();
            var arr = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
            var hour = time.getHours();
            var min = time.getMinutes();
            var sec = time.getSeconds();
            var madetime = time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate() + " " + arr[time.getDay()] + "  " + hour + (min < 10 ? ":0" : ":") + min + (sec < 10 ? ":0" : ":") + sec + (hour < 12 ? " am" : " pm");
            document.getElementById("nowtime").value = madetime;
        }
        gettime();//显示第一秒的时间
        setInterval("gettime()", 1000);
       
            function displayAlert(type, data, time) {

                var lunbo = document.createElement("div");

                if (type == "success") {
                lunbo.style.backgroundColor = "#009900";
            }
                else {
                console.log("入参type错误");
            return;
        }

        lunbo.id = "lunbo";
        lunbo.style.position = "absolute";
        lunbo.style.width = "200px";
        lunbo.style.height = "60px";
        lunbo.style.top = "50%";
        lunbo.style.marginLeft = "50%";
        lunbo.style.color = "white";
        lunbo.style.fontSize = "25px";
        lunbo.style.borderRadius = "20px";
        lunbo.style.textAlign = "center";
        lunbo.style.lineHeight = "60px";

                if (document.getElementById("lunbo") == null) {
                document.body.appendChild(lunbo);
            lunbo.innerHTML = data;
                    setTimeout(function () {
                document.body.removeChild(lunbo);
            }, time);
        }
}
        function test() {
            if (document.getElementsByTagName("input").value != null) {
                displayAlert("success", "提交成功", 1500);
            }
            }
    </script>
</body>
</html>
